<template>
  <div class="form-demo">
    <h2>表单示例</h2>
    
    <Form 
      :validation-schema="validationSchema"
      :initial-values="initialValues"
      @submit="handleSubmit"
    >
      <div class="form-item">
        <label>用户名</label>
        <Field name="username" v-slot="{ field, errorMessage }">
          <OInput v-bind="field" type="text" placeholder="请输入用户名"/>
          <div class="error">{{ errorMessage }}</div>
        </Field>
      </div>
      
      <div class="form-item">
        <label>密码</label>
        <Field name="password" v-slot="{ field, errorMessage }">
          <OInput v-bind="field" type="password" placeholder="请输入密码"/>
          <div class="error">{{ errorMessage }}</div>
        </Field>
      </div>
      
      <div class="form-buttons">
        <OButton type="primary" native-type="submit">
          提交
        </OButton>
      </div>
    </Form>
  </div>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate'
import { OInput } from '@libc/orange-ui'
import { OButton } from '@libc/orange-ui'
import * as zod from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
import { computed } from 'vue'

// 表单验证规则
const formRules = {
  username: zod.string().min(3, { message: '用户名至少3个字符' }),
  password: zod.string().min(6, { message: '密码至少6个字符' })
}

// 转换为vee-validate验证模式
const validationSchema = computed(() => {
  return toTypedSchema(zod.object(formRules))
})

// 表单初始值
const initialValues = {
  username: '',
  password: ''
}

// 提交表单处理函数
const handleSubmit = (values) => {
  console.log('表单提交数据:', values)
  alert('提交成功: ' + JSON.stringify(values))
}
</script>

<style scoped>
.form-demo {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.error {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 4px;
}

.form-buttons {
  margin-top: 24px;
}
</style>